<template>
    <div class="main-page">
        <div class="main-btn">
            <el-button  type="success" icon="el-icon-edit" style="text-align:left;" @click="addUser">新增用户</el-button>
        </div>
        <div class="main-page-list">
            <el-table
            :data="users"
            style="width: 100%;">
                <el-table-column prop="user_name" label="用户名" width="300">
                </el-table-column>
                <el-table-column prop="true_name" label="用户姓名" width="300">
                </el-table-column>
                <el-table-column prop="link_department.department_name" label="所属单位" width="300">
                </el-table-column>
                <el-table-column fixed="right" label="操作">
                    <template slot-scope="scope">
                        <!-- <el-button type="text" size="small">查看</el-button> -->
                        <el-button type="text" size="small" style="color: rgb(6, 129, 88);"  @click="linkDepartment(scope.row)">变更绑定单位</el-button>
                        <el-button type="text" size="small" @click="edit(scope.row._id)">修改密码</el-button>
                        <el-button type="text" size="small" style="color: rgb(228, 74, 74);"  @click="deleteUser(scope.row._id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    <el-dialog title="新增账号" :visible.sync="dialogVisible">
        <div class="add-new-user">
            <el-input placeholder="请输入用户名" v-model="new_user_name">
                <template slot="prepend">用户名：</template>
            </el-input>
            <el-input placeholder="请输入用户姓名" v-model="new_true_name" style="margin-top: 3%;">
                <template slot="prepend">用户姓名：</template>
            </el-input>
            <el-input show-password placeholder="请输入密码" v-model="new_user_password" style="margin-top: 3%;">
                <template slot="prepend">密码：</template>
            </el-input>
            <div>
                <p v-if="cur_link_department.department_name">当前隶属单位：{{ cur_link_department.department_name }}</p>
                <p v-else>无</p>
            </div>
            <el-select v-model="cur_link_department.department_name" placeholder="请选择绑定单位" @change="selectChange1">
                <el-option
                v-for="(item,i) in departments"
                :key="item._id"
                :label="item.department_name"
                :value="i">
                </el-option>
            </el-select>
        </div>
        <el-button type="primary" @click="confirm"  style="margin-top: 10%">确定</el-button>
    </el-dialog>

    <el-dialog title="绑定单位" :visible.sync="dialogVisible2" @close="closeLink">
        <div class="add-new-user">
            <div>
                <p>当前隶属单位：{{ cur_edit_link_department.department_name }}</p>
            </div>
            <el-select v-model="cur_edit_link_department.department_name" placeholder="请选择绑定单位" @change="selectChange2">
                <el-option
                v-for="(item,i) in departments"
                :key="item._id"
                :label="item.department_name"
                :value="i">
                </el-option>
            </el-select>
            <el-button type="primary"  style="margin-left: 3%" @click="confirmLink">确定</el-button>
        </div>
    </el-dialog>
    </div>
  </template>
  
  <script>
import {showLoading,hideLoading} from '../../components/loading.js'
    export default{
        data(){
            return {

                user_name:"",
                new_true_name:"",
                user_id:"",
                users:[],
                new_user_name:"",
                new_user_password:"",
                dialogVisible: false,
                dialogVisible2:false,
                type:'',
                new_department_name:"",
                cur_edit_link_station:{},
                cur_edit_superior_name:"",
                centers:[],
                value:"",
                cur_select_superior:{},
                link_department:"",
                cur_link_department:{
                    "department_name":""
                },
                cur_edit_link_department:{},
                departments:[],
                cur_edit_user_id:""
            }
        },
        mounted(){
            // this.upload_url="http://"+window.location.hostname+":8888/up_load"
            // this.user_name=this.$store.state.user_info.department_name
            this.user_id=this.$store.state.user_info._id
            if(!this.user_id){

            }else{
                this.getUsers()
            }
            // this.sub_department=this.$store.state.user_info.sub_department
            // this.getExcelList(this.$store.state.user_info._id);
            
        },
        //监听函数
        // watch: {
        //     '$route' () {
        //         console.log(223)
        //         this.user_name=this.$store.state.user_info.user_name
        //         this.getExcelList(this.$store.state.user_info._id);
        //     }
        // },
        activated() {
        },

        beforeMount(){
            this.user_id=this.$store.state.user_info._id
            if(!this.user_id){
            }else{
                this.getUsers()
            }
        },
        methods:{
          edit(user_id) {
            this.$prompt('新密码', '请输入新密码', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(({ value }) => {
                        this.$ajax({
                        method: 'post',
                        url: '/update_big_user_password',
                        data:{
                            "user_id":user_id,
                            "password":value
                        }
                    }).
                    then(res => {    
                        this.$message({
                                message: '修改成功',
                                type: 'success'
                            });
                    });  
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消修改'
                    });       
                }); 
          },
          selectChange2(e){
            let tmp=this.departments[e]
            this.cur_edit_link_department={
                "department_id":tmp._id,
                "department_name":tmp.department_name
            }
          },
          selectChange1(e){
            let tmp=this.departments[e]

            this.cur_link_department={
                "department_id":tmp._id,
                "department_name":tmp.department_name
            }
          },
          confirmLink(){
            let link_info=this.cur_edit_link_department
            showLoading()
            this.$ajax({
                    method: 'post',
                    url: '/update_link_department',
                    data:{
                        "user_id":this.cur_edit_user_id,
                        "link_info":link_info
                    }
                }).
                then(res => {    
                    hideLoading()
                    this.dialogVisible2=false
                    this.$message({
                        type: 'success',
                        message: '绑定成功!'
                    });
                    this.getUsers();
                    
                }); 
            
          },
          deleteUser(user_id){
            this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                showLoading();
                // hideLoading()
                // this.$message({
                //     type: 'success',
                //     message: '删除成功!'
                // });
                this.$ajax({
                    method: 'post',
                    url: '/delete_big_user_user__by_id',
                    data:{
                        "user_id":user_id
                    }
                }).
                then(res => {    
                    hideLoading()
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getUsers();
                });  
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
          },
          linkDepartment(row){
            this.dialogVisible2=true
            this.cur_edit_link_department=row.link_department
            this.cur_edit_user_id=row._id
          },
          closeLink(){
            // this.value=""
          },
          getDepartments(){
            showLoading()
            this.$ajax({
                method: 'post',
                url: '/get_users',
            }).
            then(res => {    
                let list=res.data
                let res_list=[]
                for(let i=0;i<list.length; i++){
                    if(list[i].type!='administrator'){
                        res_list.push(list[i])
                    }
                }
                hideLoading()
                this.departments=res_list
            }); 
          },
          getUsers(){
            showLoading()
            this.$ajax({
                method: 'post',
                url: '/get_big_users',
            }).
            then(res => {    
                let list=res.data
                let res_list=[]
                for(let i=0;i<list.length; i++){
                    if(list[i].link_department.department_name!='管理员'){
                        res_list.push(list[i])
                    }
                }
                hideLoading()
                this.users=res_list
                this.getDepartments()
            });             
          },
          addUser(){
            this.dialogVisible=true
          },
          confirm(){
            if(this.new_user_name==""){
                this.$message({
                    message: '请输入用户名',
                    type: 'warning'
                });
            }else if(this.new_user_password==""){
                this.$message({
                    message: '请输入密码',
                    type: 'warning'
                });
            }else if(this.new_true_name==""){
                this.$message({
                    message: '请输入真实姓名',
                    type: 'warning'
                });
            }else if(this.cur_link_department.department_name==''){
                this.$message({
                    message: '请绑定单位',
                    type: 'warning'
                });
            }else{
                //showLoading()
                let new_user={
                    "user_name":this.new_user_name,
                    "password": this.new_user_password,
                    "link_department": this.cur_link_department,
                    "true_name": this.new_true_name,
                }
                this.$ajax({
                method: 'post',
                url: '/add_big_user',
                data:{
                "user":new_user}
                }).
                then(res => {    
                    let status=res.data.status  
                    if(status==2){
                        hideLoading()
                        this.dialogVisible=false
                        this.new_user_name=""
                        this.new_user_password=""
                        this.new_true_name=""
                        this.cur_link_department={"department_name":""}
                        this.getUsers()
                        this.$message({
                            message: '新增成功',
                            type: 'success'
                        });   
                    }
                }); 
            
            }          
          }
     },
}
  </script>
  
  
  <style>
    .main-page{
      width: 100%;
      height: 80vh;
      padding: 1vh;
    }
    .main-page-list{
      margin-top:1vh;
      width: 100%;
      height: 70vh;
      overflow-y: scroll;
    }
    .main-btn{
        width: 100%;
        display: flex;
        margin-top:1vh;
        margin-bottom:1vh;
    }
    .add-new-user{
        width: 80%;
        margin: 0 auto;
    }
  </style>
  
  